<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
  pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    <style type="text/css">
		.index-jjkstit{}
	</style>
    <title>首页</title>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
	<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <link rel="stylesheet" href="css/swiper.min.css" />
</head>
<style>
.index-login{position: absolute;right: -200px;}
</style>
<body>
<div id="header">
    <div class="heade-con">
    <div class="logo"><a href=""><img src="images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a class="vcolor" href="index.jsp">首页</a></li>
                <li><a href="gyzc-list.jsp">公益众筹</a></li>
                <li><a href="cop.jsp">常见问题</a></li>
                <li><a href="ly-list.jsp">众筹资讯</a></li>
                <li><a href="new_product.jsp" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="search-txt" value="" placeholder="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
            <a href="login.jsp">登录</a>
            <span style="color: white;">|</span>
            <a href="reg.jsp">注册</a>
            <span style="color: white;">|</span>
            <a href="admin/admin_login.jsp">管理员登陆</a>
        </div>
    </div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/1525661829.jpg"></div>
      <div class="swiper-slide"><img src="images/1525661991.png"> </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<div class="content">
	<!-- 推荐项目 -->
    <div class="index-mrjx index-mrjx2">
        <div class="index-mrjx_left">
            编辑推荐
            <p><a href="">更多<br>
                项目</a></p>
        </div>
        <div class="index-mrjx_min"><a href=""><img src="images/pruduct1_32.jpg" alt=""/></a></div>
        <div class="index-mrjx_right">
            <div class="index-pruduct">
                <ul>
                    <li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>93.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li><li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>133.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="index-mrjx_botto">
            <div class="index-pruduct">
                <ul>
                    <li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>133.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li>
                    <li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>133.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li><li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>133.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li><li>
                        <div class="index-plidiv1"><a href=""><img src="images/pruduct2_34.jpg" width="237px" height="155px" alt=""/></a><div class="index-p_dkz">等款中</div>
                        </div>  <p>
                        <a href="">NGDS新游戏手柄 手机一秒变游戏机</a></p>
                        <div class="index-pli-bot">
                            <dl>
                                <dt>133.3</dt>
                                <dd>达成率</dd>
                            </dl><dl>
                            <dt>88888.3</dt>
                            <dd>已筹金额</dd>
                        </dl><dl>
                            <dt>8515</dt>
                            <dd>支持人数</dd>
                        </dl>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="ggt2"><img src="images/ggt2_39.jpg" alt=""/></div>
    <!-- 每种公益类型下的项目详情 -->
    <div id="gylx"></div>
    <div class="ggt2 ggt3"><img src="images/ggt2_39.jpg" alt=""/></div>
    <!-- 即将上架的项目 -->
	<div class="index-jjks">
    	<div class="index-jjkstit">即将开始</div>
    	<div class="index-jjkscon">
    		<ul id="xmjjks">
        	</ul>
    	</div>
	</div>
	<!-- 已经众筹成功的项目 -->
	<div class="index-jjks">
	    <div class="index-jjkstit">成功案例</div>
	    <div class="index-jjkscon">
	    	<ul id="xmcgal">
	        </ul>
	    </div>
	</div>
	<div class="ggt2 ggt3"><img src="images/ggt2_39.jpg" alt=""/></div>
	<div class="index-dxmgg">
		<div class="index-jjkstit index-jjkstit2">大项目公布区<span>新闻资讯</span></span></div>
    	<div class="index-dxmggcon">
	    	<div class="index-xxzx">
		    	<ul>
		    	 <li><span></span> <a href="">产业发展优势</a></li>
		         <li><span></span> <a href="">直接融资和间接融资</a></li>
		         <li><span></span> <a href="">产业发展优直接融资和势</a></li>
		         <li><span></span> <a href="">产业发展优直接融资和势</a></li>
		         <li><span></span> <a href="">产业发展优势</a></li>
		         <li><span></span> <a href="">产业发展优直接融资和势</a></li>
		         <li><span></span> <a href="">产业发展优势</a></li>
		         <li><span></span> <a href="">产业发展优直接融资和势</a></li>
		        </ul>
	       </div>
       </div>
	</div>
	<div class="ggt2 ggt4"><img src="images/ggt2_39.jpg" alt=""/></div>
</div>
<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">我们已经做到 </li>
            <li>单项支持人数<span class="inde-span1"></span></li>
            <li>单项筹款金额<span class="inde-span2"></span></li>
            <li>累计筹款金额<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li class="bot-con1-li1">发起项目流程 </li>
            <li><span class="inde-span4"></span>发起人创建项目</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>用户收到回报</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

            <a href=" ">关于淘宝</a>
            <a href=" ">合作伙伴</a>
            <a href=" ">营销中心</a>
            <a href=" ">廉正举报</a>
            <a href=" ">联系客服</a>
            <a href=" ">开放平台</a>
            <a href=" ">诚征英才</a>
            <a href=" ">联系我们</a>
            <a href=" ">网站地图</a>
            <a href=" ">法律声明</a>　　　
            <em>© 2003-2015 Taobao.com 版权所有</em><br>

       <br>
            <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
            <b>|</b>
            <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
            <b>|</b>
            <span>信息网络传播视听节目许可证：1109364号</span>
            <b>|</b>
            <span>举报电话:0571-81683755</span>
    </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swiper.min.js" ></script>
<script>
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 1,
		spaceBetween: 30,
	    centeredSlides: true,
	    loop: true,
	    autoplay: {
	    	delay: 2500,
	    	disableOnInteraction: false,
	    },
	    pagination: {
	    	el: '.swiper-pagination',
	    	clickable: true,
	    },
	    navigation: {
	    	nextEl: '.swiper-button-next',
	    	prevEl: '.swiper-button-prev',
	    },
	});
</script>
<script type="text/javascript">
	//获取公益类型的种类
	$(function(){
		$.ajax({
			url:"${APP_PATH}/gylx",
			type:"GET",
			success:function(result){
				//console.log(result);
				//每种公益类型下的项目
				build_projectstype_div(result);
			}
		});
	});
	//在页面显示公益类型项目详情信息
	function build_projectstype_div(result){
		$.each(result.extend.projectstype,function(){
			//查询该公益类型众筹中项目详情信息
			var prejects=build_projects_gylxzcz(this.pstId);
			if(prejects.length>0){
				var projectstypes =$("<div></div>")
				.addClass("index-mrjx_left").append(this.pstName)
				.append($("<p></p>").append($("<a></a>")
						.attr("href","gyzc-list.jsp?ps_pst_id="+this.pstId).append("更多")
						.append($("<br>")).append("项目")));
				var gylximg = $("<div></div>")
				.addClass("index-mrjx_min").append($("<a></a>")
						.attr("href","gyzc-list.jsp?ps_pst_id="+this.pstId).append($("<img/>")
								.attr("src","images/pruduct1_32.jpg")));
				var count=2;
				if(prejects.length==1){
					count=1;
				}
				var ull=$("<ul></ul>");
				$.each(prejects,function(index,item){
					if(count==0){
						return false;
					}
					var dl1=$("<dl></dl>").append($("<dt></dt>")
							.append((Math.round((item.psGetmoney/item.psMoney)*10000))/100.00))
							.append($("<dd></dd>").append("达成率"));
					var dl2=$("<dl></dl>").append($("<dt></dt>")
							.append(item.psGetmoney)).append($("<dd></dd>").append("已筹金额"));
					var dl3=$("<dl></dl>").append($("<dt></dt>")
							.append(item.psGetpeople)).append($("<dd></dd>").append("支持人数"));
					var divdl=$("<div></div>").addClass("index-pli-bot")
							.append(dl1).append(dl2).append(dl3);
					var pa=$("<p></p>").append($("<a></a>")
							.attr("href","product-detail2.jsp?psId="+item.psId).append(item.psName));
					var a = $("<a></a>").attr("href","product-detail2.jsp?psId="+item.psId).append($("<img/>")
							.attr("src","images/pruduct2_34.jpg")
							.attr("width","237px").attr("height","155px"));
					var diva = $("<div></div>").addClass("index-plidiv1")
							.append(a).append($("<div></div>").addClass("index-p_dkz")
							.append("筹款中"));
					var lidiv = $("<li></li>").append(diva).append(pa).append(divdl);
					ull=ull.append(lidiv);
					count--;
				});
				var divdiv=$("<div></div>").addClass("index-mrjx_right")
						  .append($("<div></div>").addClass("index-pruduct")
					  	  .append(ull));
				count=prejects.length;
				if(prejects.length<=2){
					$("<div></div>").addClass("index-mrjx")
					.append(projectstypes).append(gylximg).append(divdiv).appendTo("#gylx");
				}else{
 					var ulli=$("<ul></ul>");
					$.each(prejects,function(index,item){
						if(count == 2){
							return false;
						}
						var dl1=$("<dl></dl>").append($("<dt></dt>")
								.append((Math.round((item.psGetmoney/item.psMoney)*10000))/100.00))
								.append($("<dd></dd>").append("达成率"));
						var dl2=$("<dl></dl>").append($("<dt></dt>")
								.append(item.psGetmoney)).append($("<dd></dd>").append("已筹金额"));
						var dl3=$("<dl></dl>").append($("<dt></dt>")
								.append(item.psGetpeople)).append($("<dd></dd>").append("支持人数"));
						var divdl=$("<div></div>").addClass("index-pli-bot")
								.append(dl1).append(dl2).append(dl3);
						var pa=$("<p></p>").append($("<a></a>")
								.attr("href","product-detail2.jsp?psId="+item.psId).append(item.psName));
						var a = $("<a></a>").attr("href","product-detail2.jsp?psId="+item.psId).append($("<img/>")
								.attr("src","images/pruduct2_34.jpg")
								.attr("width","237px").attr("height","155px"));
						var diva = $("<div></div>").addClass("index-plidiv1")
								.append(a).append($("<div></div>").addClass("index-p_dkz")
								.append("筹款中"));
						var lidiv = $("<li></li>").append(diva).append(pa).append(divdl);
						ulli=ulli.append(lidiv);
						count--;
					});
					var divdiv2=$("<div></div>").addClass("index-mrjx_botto")
							  .append($("<div></div>").addClass("index-pruduct")
						  	  .append(ulli));
					$("<div></div>").addClass("index-mrjx index-mrjx2")
					.append(projectstypes).append(gylximg).append(divdiv).append(divdiv2).appendTo("#gylx");
				}
			}else{
				return true;
			}
		});
	}
	//获取每种公益类型下众筹中的项目详情信息
	function build_projects_gylxzcz(pstId){
		var time=Math.random();
		var prejects;
		$.ajax({
			url:"${APP_PATH}/projectsgylxzcz",
			data:{"pstId":pstId,"time":time},
			type:"GET",
			async:false,
			success:function(result){
				prejects =result.extend.projectsGylxZcz.list;
			}
		});
		return prejects;
	}
	//获取即将开始的项目详情信息
	$(function(){
		$.ajax({
			url:"${APP_PATH}/projectsType/"+1,
			type:"GET",
			success:function(result){
				//console.log(result);
				//即将开始的项目详情信息展示
				jjks_projects_show(result);
			}
		});
	});
	//把即将开始的项目详情信息展示到页面
	function jjks_projects_show(result){
		$.each(result.extend.projectsType,function(index,item){
			var b=$("<b></b>").append("上线日期").append($("<span></span>").append(getMyDate(item.psStarttime)));
			var i=$("<i></i>").append("目标金额:").append($("<span></span>").
					append(item.psMoney));
			var divib=$("<div></div>").append(i).append(b);
			var diva=$("<div></div>").append($("<a></a>")
					.attr("href","product-detail2.jsp?psId="+item.psId).append(item.psName));
			var div =$("<div></div>").addClass("index-j_dkz").append("预热中");
			var a=$("<a></a>").attr("href","product-detail2.jsp?psId="+item.psId).append($("<img/>")
				  .attr("src","images/producc_47.jpg")
				  .attr("width","238px").attr("height","155px"));
			var divadiv=$("<div></div>").addClass("index-jjkscon1").append(a).append(div);
			$("<li></li>").append(divadiv).append(diva).append(divib).appendTo("#xmjjks");
		});
	}
	//获取已经众筹成功的项目详情信息
	$(function(){
		$.ajax({
			url:"${APP_PATH}/projectsType/"+3,
			type:"GET",
			success:function(result){
				//console.log(result);
				//众筹成功的项目详情信息展示
				cgal_projects_show(result);
			}
		});
	});
	//把已经众筹成功的项目详情信息展示到页面
	function cgal_projects_show(result){
		$.each(result.extend.projectsType,function(index,item){
			var b=$("<b></b>").append("支持人数").append($("<span></span>").append(item.psGetpeople));
			var i=$("<i></i>").append("已获得:").append($("<span></span>").
					append(item.psGetmoney));
			var divib=$("<div></div>").append(i).append(b);
			var diva=$("<div></div>").append($("<a></a>")
					.attr("href","product-detail2.jsp?psId="+item.psId).append(item.psName));
			var div =$("<div></div>").addClass("index-c_dkz").append("项目成功");
			var a=$("<a></a>").attr("href","product-detail2.jsp?psId="+item.psId).append($("<img/>")
				  .attr("src","images/producc_47.jpg")
				  .attr("width","238px").attr("height","155px"));
			var divadiv=$("<div></div>").addClass("index-jjkscon1").append(a).append(div);
			$("<li></li>").append(divadiv).append(diva).append(divib).appendTo("#xmcgal");
		});
	}
	//把后台获取的时间毫秒转换成年月日
	function getMyDate(onDate){
			var oDate = new Date(onDate),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth()+1,
			oDay = oDate.getDate(),
			oTime = oYear +'/'+ getzf(oMonth) +'/'+ getzf(oDay);//最后拼接时间
			return oTime;
		};
	//补0操作
	function getzf(num){
		if(parseInt(num) < 10){
			num = '0'+num;
		}
		return num;
		}
</script>
</body>
</html>